<template>
  <input type="button" class="inputBtnCodeMsg" :class="{uBtnDone:uBtnDoneSwitch}" value="获取验证码" @click="getCodeMsg">
</template>

<script>
  export default {
    name: 'inputBtnCodeMsg',
    props: {
      inputCodeMsgCount: {
        type: Number,
        default: 60
      },
      inputCodeMsgAuto: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        count: this.inputCodeMsgCount,
        timer: null,
        uBtnDoneSwitch: false,
        msgAuto: this.inputCodeMsgAuto
      }
    },
    mounted () {
      if (this.msgAuto) {
        this.getCodeMsg()
      }
    },
    methods: {
      getCodeMsg () {
        let _btn = this.$el
        _btn.setAttribute('disabled', true)
        this.uBtnDoneSwitch = true
        this.$emit('inputBtnCodeMsgHandle')
        _btn.value = `重新发送(${this.count})`
        this.count--
        this.timer = setInterval(() => {
          this.cd(_btn)
        }, 1000)
      },
      cd (_this) {
        let _btn = _this
        if (this.count === 0) {
          _btn.removeAttribute('disabled')
          _btn.value = '获取验证码'
          this.uBtnDoneSwitch = false
          this.count = this.inputCodeMsgCount
          clearInterval(this.timer)
          this.timer = null
        } else {
          _btn.value = `重新发送(${this.count})`
          this.count--
        }
      }
    }
  }
</script>
